import React from 'react'

export default function LifeAdvice({ weatherData, isMock = false }) {
  // 根据天气数据生成生活建议
  const generateAdvice = () => {
    if (!weatherData) return [];
    
    const { temperature, condition, humidity } = weatherData;
    const temp = parseInt(temperature) || 0;
    const hum = parseInt(humidity) || 50;
    const conditionLower = condition?.toLowerCase() || '';
    
    const advice = [];
    
    // 穿衣建议
    let clothingAdvice = '';
    if (temp < 0) {
      clothingAdvice = '天气寒冷，请穿羽绒服、厚毛衣、保暖内衣等多层保暖衣物。';
    } else if (temp < 10) {
      clothingAdvice = '天气较冷，建议穿厚外套、毛衣等保暖衣物。';
    } else if (temp < 20) {
      clothingAdvice = '天气凉爽，建议穿薄外套或长袖衬衫。';
    } else if (temp < 28) {
      clothingAdvice = '天气舒适，建议穿短袖、T恤等轻便衣物。';
    } else {
      clothingAdvice = '天气炎热，建议穿轻薄透气的衣物，注意防晒。';
    }
    
    if (conditionLower.includes('雨')) {
      clothingAdvice += ' 记得携带雨具。';
    } else if (conditionLower.includes('雪')) {
      clothingAdvice += ' 注意防滑保暖。';
    }
    
    advice.push({
      title: '穿衣建议',
      content: clothingAdvice,
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C10.9 2 10 2.9 10 4C10 5.1 10.9 6 12 6C13.1 6 14 5.1 14 4C14 2.9 13.1 2 12 2ZM12 7C9.2 7 7 9.2 7 12C7 14.8 9.2 17 12 17C14.8 17 17 14.8 17 12C17 9.2 14.8 7 12 7ZM12 15C10.3 15 9 13.7 9 12C9 10.3 10.3 9 12 9C13.7 9 15 10.3 15 12C15 13.7 13.7 15 12 15Z" fill="#0ea5e9" />
        </svg>
      )
    });
    
    // 出行建议
    let travelAdvice = '建议正常出行。';
    if (conditionLower.includes('大雨') || conditionLower.includes('暴雨') || conditionLower.includes('雷阵雨')) {
      travelAdvice = '有强降水，出行请注意安全，建议乘坐公共交通。';
    } else if (conditionLower.includes('雨')) {
      travelAdvice = '有雨，记得携带雨具，驾车注意路滑。';
    } else if (conditionLower.includes('雪')) {
      travelAdvice = '有雪，道路可能湿滑，请谨慎驾驶或选择公共交通。';
    } else if (conditionLower.includes('雾') || conditionLower.includes('霾')) {
      travelAdvice = '能见度低，驾车请注意减速慢行，保持安全距离。';
    } else if (temp > 35) {
      travelAdvice = '高温天气，外出请注意防暑防晒，多补充水分。';
    } else if (temp < -10) {
      travelAdvice = '严寒天气，外出请注意保暖，避免长时间户外活动。';
    }
    
    advice.push({
      title: '出行建议',
      content: travelAdvice,
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5H6.5C5.84 5 5.28 5.42 5.08 6.01L3 12V20C3 20.55 3.45 21 4 21H5C5.55 21 6 20.55 6 20V19H18V20C18 20.55 18.45 21 19 21H20C20.55 21 21 20.55 21 20V12L18.92 6.01ZM6.5 16C5.67 16 5 15.33 5 14.5C5 13.67 5.67 13 6.5 13C7.33 13 8 13.67 8 14.5C8 15.33 7.33 16 6.5 16ZM17.5 16C16.67 16 16 15.33 16 14.5C16 13.67 16.67 13 17.5 13C18.33 13 19 13.67 19 14.5C19 15.33 18.33 16 17.5 16ZM5.81 11L7.75 6.65C7.89 6.35 8.24 6.2 8.54 6.34C8.83 6.48 8.98 6.83 8.84 7.13L6.9 11.47H17.1L15.16 7.13C15.02 6.83 15.17 6.48 15.46 6.34C15.76 6.2 16.11 6.35 16.25 6.65L18.19 11H5.81Z" fill="#10b981" />
        </svg>
      )
    });
    
    // 运动建议
    let sportAdvice = '天气适宜运动，建议进行户外活动。';
    if (conditionLower.includes('大雨') || conditionLower.includes('暴雨') || conditionLower.includes('雷阵雨')) {
      sportAdvice = '不宜户外运动，建议选择室内健身活动。';
    } else if (conditionLower.includes('雨') || conditionLower.includes('雪')) {
      sportAdvice = '有降水，建议选择室内运动。';
    } else if (temp > 35) {
      sportAdvice = '高温天气，避免剧烈运动，建议清晨或傍晚进行适度活动。';
    } else if (temp < 0) {
      sportAdvice = '天气寒冷，户外运动请注意保暖，避免过度出汗导致感冒。';
    } else if (hum > 80 && temp > 25) {
      sportAdvice = '高温高湿，运动请注意防暑降温，及时补充水分。';
    }
    
    advice.push({
      title: '运动建议',
      content: sportAdvice,
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13.5 5.5C14.33 5.5 15 4.83 15 4C15 3.17 14.33 2.5 13.5 2.5C12.67 2.5 12 3.17 12 4C12 4.83 12.67 5.5 13.5 5.5ZM9.8 8.96L7 23H9.1L10.5 16H13.5L14.9 23H17L14.2 8.96H9.8ZM18.5 5.5C19.33 5.5 20 4.83 20 4C20 3.17 19.33 2.5 18.5 2.5C17.67 2.5 17 3.17 17 4C17 4.83 17.67 5.5 18.5 5.5Z" fill="#f59e0b" />
        </svg>
      )
    });
    
    // 其他生活建议
    let otherAdvice = '';
    if (conditionLower.includes('晴') && temp > 25) {
      otherAdvice = '阳光强烈，外出请注意防晒，涂抹防晒霜，佩戴太阳镜。';
    } else if (hum < 30) {
      otherAdvice = '空气干燥，注意补充水分，使用保湿护肤品。';
    } else if (hum > 80) {
      otherAdvice = '湿度较大，注意防潮，保持室内通风。';
    } else if (conditionLower.includes('雾') || conditionLower.includes('霾')) {
      otherAdvice = '空气质量不佳，外出建议佩戴口罩，减少户外活动时间。';
    } else {
      otherAdvice = '天气舒适，是户外活动的好时机。';
    }
    
    advice.push({
      title: '生活建议',
      content: otherAdvice,
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.5 7H11V13L16.2 16.2L17 14.9L12.5 12.2V7Z" fill="#8b5cf6" />
        </svg>
      )
    });
    
    return advice;
  };

  const advice = generateAdvice();
  
  // 卡片样式
  const styles = {
    container: {
      marginTop: 30,
      padding: 20,
      borderRadius: 16,
      backgroundColor: '#f8fafc',
      border: '1px solid #e2e8f0',
    },
    title: {
      fontSize: 18,
      fontWeight: 600,
      margin: '0 0 16px 0',
      color: '#0f172a',
    },
    adviceGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
      gap: 16,
    },
    adviceCard: {
      backgroundColor: 'white',
      borderRadius: 12,
      padding: 16,
      boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
      transition: 'transform 0.2s ease, box-shadow 0.2s ease',
    },
    adviceHeader: {
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      marginBottom: 12,
    },
    adviceTitle: {
      fontSize: 16,
      fontWeight: 600,
      color: '#0f172a',
      margin: 0,
    },
    adviceContent: {
      fontSize: 14,
      lineHeight: 1.6,
      color: '#334155',
      margin: 0,
    },
    mockLabel: {
      fontSize: 11,
      color: '#94a3b8',
      marginTop: 8,
      textAlign: 'right',
    },
  };

  return (
    <div style={styles.container}>
      <h3 style={styles.title}>生活建议</h3>
      {advice.length === 0 ? (
        <p style={{ color: '#64748b', textAlign: 'center', padding: 20 }}>暂无生活建议数据</p>
      ) : (
        <div style={styles.adviceGrid}>
          {advice.map((item, index) => (
            <div 
              key={index} 
              style={{
                ...styles.adviceCard,
                transform: 'translateY(0)',
                boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
                ':hover': {
                  transform: 'translateY(-2px)',
                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                }
              }}
            >
              <div style={styles.adviceHeader}>
                <div>{item.icon}</div>
                <h4 style={styles.adviceTitle}>{item.title}</h4>
              </div>
              <p style={styles.adviceContent}>{item.content}</p>
              {isMock && <div style={styles.mockLabel}>示例建议</div>}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}